<template lang="">
  <div style="font-size:30px">
    pinia:{{Test.current}}---{{ Test.name }}
  </div>
  <br>
  <button @click="change">change</button>

  <div>
    不具有响应式的值：{{current}}---{{name}}
  </div>

  <div style="color:red;font-size:30px">
  action:actions-user:{{Test.user}};actions-name:{{Test.name}}
  </div>
  <br>
  <div style="font-size:30px">
    getter:{{Test.newName}}
  </div>
  <br>
  <div style="font-size:30px">
    <button @click="reset">reset</button>
  </div>

</template>
<script setup lang="ts">
import { userTestStore } from './store';
import { storeToRefs } from 'pinia'; //解决解构后响应的问题
const Test = userTestStore()

const { current, name, user } = storeToRefs(Test)


const change = () => {
  //Test.current++  // 1、单个修改值
  //Test.$patch({ current:100,name:"批量修改State的值"}) //2 批量修改
  // Test.$patch((state)=>{
  //   state.current++;
  //   state.name = "批量修改函数形式"
  // })  //3 批量修改，函数的写法，可以处理复杂逻辑
  // Test.$state = {
  //   current:10,
  //   name:'通过原始对象修改整个实例'
  // } // 4 通过原始对象修改整个实例
  // Test.setCurrent(256) // 5 通过actions修改

  // Test.current++
  // current.value++

  // Test.setUser() // 同步写法
  Test.setUsetAsync() // 异步写法
}

const reset = ()=>{
  Test.$reset()
}

Test.$subscribe((args,state)=>{
  console.log('======>',args)
  console.log('======>',state)
}),{
  detached:true,
  deep:true,
  flush:'post'
}


Test.$onAction((args)=>{
  console.log(args)
},true)

</script>
<style lang="">
  
</style>